import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { OtherWarehousingService, OtherWarehousing } from './other-warehousing.service';
import { forkJoin } from 'rxjs';

@Component({
  selector: 'app-other-warehousing-view',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">
        <i class="fas fa-eye me-2"></i>查看其他入库单
        <span class="status-badge ms-2" [ngClass]="{
          'status-pending': data?.status === '计划中',
          'status-completed': data?.status === '已完成',
          'status-processing': data?.status === '处理中'
        }">
          <i class="fas" [ngClass]="{
            'fa-clock': data?.status === '计划中',
            'fa-check-circle': data?.status === '已完成',
            'fa-spinner fa-spin': data?.status === '处理中'
          }"></i>
          {{data?.status}}
        </span>
      </h4>
      <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss()"></button>
    </div>
    <div class="modal-body page-transition">
      <!-- 基本信息 -->
      <div class="info-section">
        <div class="section-title mb-3">
          <i class="fas fa-info-circle me-2"></i>基本信息
        </div>
        <div class="row">
          <div class="col-md-3">
            <div class="info-display">
              <div class="info-label">货主</div>
              <div class="info-value">
                <i class="fas fa-building"></i>
                {{data?.ownerCode || '-'}}
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="info-display">
              <div class="info-label">预计到货时间</div>
              <div class="info-value">
                <i class="far fa-clock"></i>
                {{data?.estimatedArrivalTime ? (data.estimatedArrivalTime | date:'yyyy-MM-dd HH:mm:ss') : '-'}}
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="info-display">
              <div class="info-label">客户订单号</div>
              <div class="info-value">
                <i class="fas fa-file-alt"></i>
                {{data?.customerOrderNo || '-'}}
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="info-display">
              <div class="info-label">运输编号</div>
              <div class="info-value">
                <i class="fas fa-truck"></i>
                {{data?.transportNo || '-'}}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 运输信息 -->
      <div class="info-section mt-4">
        <div class="section-title mb-3">
          <i class="fas fa-truck me-2"></i>运输信息
        </div>
        <div class="row">
          <div class="col-md-3">
            <div class="info-display">
              <div class="info-label">运输公司</div>
              <div class="info-value">
                <i class="fas fa-building"></i>
                {{data?.transportCompany || '-'}}
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="info-display">
              <div class="info-label">供应商</div>
              <div class="info-value">
                <i class="fas fa-industry"></i>
                {{data?.supplier || '-'}}
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="info-display">
              <div class="info-label">预约库区</div>
              <div class="info-value">
                <i class="fas fa-warehouse"></i>
                {{getWarehouseAreaName(data?.reservedWarehouseArea) || '-'}}
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="info-display">
              <div class="info-label">仓库</div>
              <div class="info-value">
                <i class="fas fa-warehouse"></i>
                {{getWarehouseName(data?.warehouse) || '-'}}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 订单信息 -->
      <div class="info-section mt-4">
        <div class="section-title mb-3">
          <i class="fas fa-file-alt me-2"></i>订单信息
        </div>
        <div class="row">
          <div class="col-md-3">
            <div class="info-display">
              <div class="info-label">订单类型</div>
              <div class="info-value">
                <i class="fas fa-tags"></i>
                {{getOrderTypeName(data?.orderType) || '-'}}
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="info-display">
              <div class="info-label">月台</div>
              <div class="info-value">
                <i class="fas fa-warehouse"></i>
                {{getPlatformName(data?.platform) || '-'}}
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="info-display">
              <div class="info-label">车号</div>
              <div class="info-value">
                <i class="fas fa-truck"></i>
                {{data?.carNo || '-'}}
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="info-display">
              <div class="info-label">司机</div>
              <div class="info-value">
                <i class="fas fa-user"></i>
                {{data?.driverName || '-'}}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 联系信息 -->
      <div class="info-section mt-4">
        <div class="section-title mb-3">
          <i class="fas fa-address-card me-2"></i>联系信息
        </div>
        <div class="row">
          <div class="col-md-3">
            <div class="info-display">
              <div class="info-label">司机电话</div>
              <div class="info-value">
                <i class="fas fa-phone"></i>
                {{data?.driverPhone || '-'}}
              </div>
            </div>
          </div>
          <div class="col-md-9">
            <div class="info-display">
              <div class="info-label">备注</div>
              <div class="info-value">
                <i class="fas fa-comment-alt"></i>
                {{data?.remarks || '-'}}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 入库明细 -->
      <div class="info-section mt-4">
        <div class="section-title mb-3">
          <i class="fas fa-list me-2"></i>入库明细
        </div>
        <div class="table-responsive">
          <table class="table modern-table">
            <thead>
              <tr>
                <th>序号</th>
                <th>商品编码</th>
                <th>商品名称</th>
                <th>数量</th>
                <th>计划占用储位数</th>
                <th>收货完成</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngIf="!data?.items?.length">
                <td colspan="6" class="text-center">暂无数据</td>
              </tr>
              <tr *ngFor="let item of data?.items; let i = index">
                <td>{{i + 1}}</td>
                <td>
                  <i class="fas fa-barcode me-1"></i>
                  {{item.productCode}}
                </td>
                <td>
                  <i class="fas fa-box me-1"></i>
                  {{item.productName}}
                </td>
                <td>
                  <i class="fas fa-hashtag me-1"></i>
                  {{item.quantity}}
                </td>
                <td>
                  <i class="fas fa-layer-group me-1"></i>
                  {{item.plannedStorageSlots}}
                </td>
                <td>
                  <span class="status-badge" [ngClass]="{
                    'status-completed': item.status === 'Yes',
                    'status-pending': item.status === 'No',
                    'status-processing': item.status === 'Initial'
                  }">
                    <i class="fas" [ngClass]="{
                      'fa-check-circle': item.status === 'Yes',
                      'fa-times-circle': item.status === 'No',
                      'fa-clock': item.status === 'Initial'
                    }"></i>
                    {{getStatusName(item.status)}}
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="modern-btn btn-secondary" (click)="activeModal.close()">
        <i class="fas fa-times"></i>
        <span>关闭</span>
      </button>
    </div>
  `,
  standalone: true,
  imports: [CommonModule, FormsModule],
  styleUrls: ['../shared/purchase.styles.scss'],
  styles: [
    `
    .section-title {
      color: var(--bs-primary);
      font-weight: 600;
      font-size: 1.1rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid var(--bs-border-color);
      display: flex;
      align-items: center;
      
      i {
        color: var(--bs-primary);
      }
    }

    .info-section {
      background: white;
      border-radius: 0.5rem;
      padding: 1.5rem;
      box-shadow: var(--shadow-sm);
      transition: all 0.2s ease;
      
      &:hover {
        box-shadow: var(--shadow-md);
      }
    }

    .modal-title {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      
      i {
        color: var(--bs-primary);
      }
    }
    `
  ]
})
export class OtherWarehousingViewComponent implements OnInit {
  id: string;
  data: OtherWarehousing;
  orderTypes = [];
  platforms = [];
  warehouseAreas = [];
  warehouses = [];

  constructor(
    public activeModal: NgbActiveModal,
    private service: OtherWarehousingService
  ) {}

  ngOnInit(): void {
    if (this.id) {
      // 使用 forkJoin 同时加载所有下拉选项和数据
      forkJoin({
        orderTypes: this.service.getOrderTypes(),
        platforms: this.service.getPlatforms(),
        warehouseAreas: this.service.getWarehouseAreas(),
        warehouses: this.service.getWarehouses(),
        data: this.service.getById(this.id)
      }).subscribe({
        next: (result) => {
          this.orderTypes = result.orderTypes.items || [];
          this.platforms = result.platforms.items || [];
          this.warehouseAreas = result.warehouseAreas.items || [];
          this.warehouses = result.warehouses.items || [];
          this.data = result.data;
          
          console.log('Loaded data:', {
            warehouseAreas: this.warehouseAreas,
            warehouses: this.warehouses,
            currentWarehouseArea: this.getWarehouseAreaName(this.data?.reservedWarehouseArea),
            currentWarehouse: this.getWarehouseName(this.data?.warehouse)
          });
        },
        error: (error) => {
          console.error('加载数据失败:', error);
        }
      });
    }
  }

  getOrderTypeName(value: any): string {
    if (value === null || value === undefined) return '';
    const type = this.orderTypes.find(t => t.value === value);
    return type ? type.name : value.toString();
  }

  getPlatformName(value: any): string {
    if (value === null || value === undefined) return '';
    const platform = this.platforms.find(p => p.value === value);
    return platform ? platform.name : value.toString();
  }

  getWarehouseAreaName(value: any): string {
    if (value === null || value === undefined) return '';
    const area = this.warehouseAreas.find(a => a.value === value || a.id === value);
    return area ? area.name : '';
  }

  getWarehouseName(value: any): string {
    if (value === null || value === undefined) return '';
    const warehouse = this.warehouses.find(w => w.value === value || w.id === value);
    return warehouse ? warehouse.name : '';
  }

  getStatusName(status: string): string {
    switch (status) {
      case 'Yes':
        return '已完成';
      case 'No':
        return '计划中';
      case 'Initial':
        return '初始状态';
      default:
        return status;
    }
  }
} 